<template>
  <div class="com-container" ref="chart">
    <div ref="chart" class="com-chart"></div>
  </div>
</template>

<script>
import { markRaw } from 'vue';
import * as echarts from 'echarts'
require('echarts/theme/dark');
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chartInstance = markRaw(echarts.init(this.$refs.chart, 'dark'))
      const initOption = {
        title: {
          text: '▎ 各年龄段睡眠情况雷达图',
          left: 8,
          top: 8,
        },
        tooltip: {
          trigger: 'item',
          show: true,
        },
        legend: {
          top: '10%',
          icon: 'circle'
        },
        grid: {
          top: '30%',
          left: '10%',
          right: '10%',
          bottom: 0,
          containLabel: true // 确保标签在图表区域内
        },
        radar: {
          shape: 'circle',
          splitNumber: 4,
          name: {
            textStyle: {
              fontSize: 15,
              color: 'white',
              backgroundColor: 'lightsteelblue ',
              borderRadius: 10,
              padding: [3, 5]
            }
          },
          splitLine: {
            lineStyle: {
              width: 1,
              color: ['#ddd']
            }
          },
          splitArea: {
            areaStyle: {
              color: '#100C2A'
            }
          },
          radius: '50%', // 设置雷达图的半径为容器宽度的50%
        },
        series: [
          {
            type: 'radar',
            areaStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  { offset: 0, color: `rgba(255, 255, 255, 0)` },
                  { offset: 1, color: `rgba(255, 255, 255, 0.6)` }
                ])
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2
                }
              }
            },
            symbol: 'none', // 隐藏数据点
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      const { data: ret } = await this.$axios.get('chart5')
      this.allData = ret.data
      this.updataChart()
    },
    updataChart() {
      const indicators = [
        { name: '心率', max: 100 },
        { name: '睡眠质量', max: 20 },
        { name: '身体活动水平', max: 150 },
        { name: '压力水平', max: 15 },
        { name: '睡眠时长', max: 50 }
      ]
      const seriesData = this.allData.map(item => ({
        name: item.name,
        value: item.value.map((value, index) => {
          let result;
          switch (index) {
            case 0:
              result = (value - 69) * 100; // 心率
              break;
            case 1:
              result = (value - 6.7) * 100; // 睡眠质量
              break;
            case 2:
              result = (value - 58) * 100; // 身体活动水平
              break;
            case 3:
              result = (value - 4.8) * 100; // 压力水平
              break;
            case 4:
              result = (value - 7.1) * 1000; // 睡眠持续时间
              break;
            default:
              result = value;
          }
          return parseFloat(result.toFixed(1)); // 保留一位小数并转换为数字
        })
      }));
      console.log(indicators)
      console.log(seriesData)
      const dataOption = {
        legend: {
          data: seriesData.map(item => item.name)
        },
        radar: {
          indicator: indicators,
        },
        series: [
          {
            type: 'radar',
            data: seriesData,
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.chart.offsetWidth / 100 * 4
      console.log('2:' + titleFontSize)
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          itemStyle: {
            fontSize: titleFontSize / 2
          }
        },
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }

  }
}
</script>

<style></style>